import React from "react";
import {
    ActivityIndicator,
    DeviceEventEmitter,
    Image,
    InteractionManager,
    ScrollView,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import chjStyle from "../../CustomStyle";
import ModuleTextItem from "../module/ModuleTextItem";
import RecordedCarList from "../record/RecordedCarList";
import Login from "./Login";
import Util from "../Util";
import Toast from "react-native-root-toast";
import Password from "../../page/mine/Password";
import {Actions} from "react-native-router-flux";

export default class MineUI extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {
            isLoading: true
        };
    }

    // 组件被加载时
    componentDidMount() {
        this.updateEventListener = DeviceEventEmitter.addListener('password', (v) => this.setState({}));

        InteractionManager.runAfterInteractions(() => {
            this.setState({
                isLoading: false
            });
        });
    }

    // 组件即将被卸载时
    componentWillUnmount() {
        this.updateEventListener.remove();
    }

    // 组件被渲染时
    render() {
        if (this.state.isLoading) {
            return (
                <View style={chjStyle.mainContainer}>
                    <ActivityIndicator
                        animating={true}
                        style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                        size="large"/>
                </View>
            );
        }
        return (
            <ScrollView
                showsVerticalScrollIndicator={false}
                style={[chjStyle.secondaryContainer, {backgroundColor: '#efeff4'}]}>
                <View style={{
                    width: chjStyle.getActualSizeInHorizontal(750),
                    height: chjStyle.getActualSizeInVertical(488)
                }}/>

                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={() => {
                        const user = Util.getUser();
                        if (!user.token && !user.id) {
                            Actions.Login({
                                name: 'Login',
                            });
                        }
                    }}
                    style={{
                        backgroundColor: '#fff',
                        position: 'absolute',
                        left: 0, top: 0, right: 0, width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(488),
                    }}
                >

                    <View style={{
                        backgroundColor: '#ff971d',
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(488)
                    }}/>

                    <Image
                        resizeMode="stretch"
                        style={{
                            backgroundColor: '#fff',
                            position: 'absolute',
                            left: 0,
                            top: chjStyle.getActualSizeInVertical(300),
                            width: chjStyle.getActualSizeInHorizontal(750),
                            height: chjStyle.getActualSizeInVertical(194),
                        }}
                        source={require('../../../img/TopBG.png')}
                    />

                    <Image
                        resizeMode="stretch"
                        style={{
                            position: 'absolute',
                            width: chjStyle.getActualSizeInHorizontal(182),
                            height: chjStyle.getActualSizeInVertical(182),
                            top: chjStyle.getActualSizeInVertical(50),
                            left: chjStyle.getActualSizeInHorizontal(284),
                        }}
                        source={require('../../../img/headerIcon.png')}
                    />

                    <Text style={[chjStyle.baseText, {
                        position: 'absolute',
                        backgroundColor: "#0000",
                        fontSize: chjStyle.getActualFontSize(36),
                        color: "#FFFFFF",
                        textAlign: "center",
                        top: chjStyle.getActualSizeInVertical(250),
                        width: chjStyle.getActualSizeInHorizontal(750)
                    }]}>
                        {Util.user.phone ? Util.user.phone : '点击这里登录'}
                    </Text>
                </TouchableOpacity>


                {
                    this.showCarInputItem()
                }


                {/*<ModuleTextItem*/}
                {/*text='浏览记录'*/}
                {/*icon={require('../../../img/MineIconTrack.png')}*/}
                {/*clickedTextItem={() => Alert.alert('提示', '功能开发中', [{text: 'OK'}]) }/>*/}

                {/*<ModuleTextItem*/}
                {/*text='我的收藏'*/}
                {/*icon={require('../../../img/MineIconCollection.png')}*/}
                {/*clickedTextItem={() => Alert.alert('提示', '功能开发中', [{text: 'OK'}]) }/>*/}

                {
                    this.renderPassword()
                }

                {
                    this.renderLogout()
                }


            </ScrollView>
        );
    }

    renderLogout() {
        if (Util.user.token) {
            return (<ModuleTextItem
                text='退出登录'
                icon={require('../../../img/MineIconSetting.png')}
                clickedTextItem={() => {
                    Util.storage.clearMapForKey('users');
                    Util.user = {};
                    this.setState({});
                    Toast.show("已退出登录", {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});
                }}/>);
        }
    }

    renderPassword() {
        if (Util.user.userinfo) {
            if (Util.user.token && Util.user.userid) {
                return (<ModuleTextItem
                    text='修改密码'
                    icon={require('../../../img/MineIconTrack.png')}
                    clickedTextItem={() => {
                        const user = Util.getUser();
                        Actions.Password({
                            name: 'Password',
                            phoneNumber: user.phone
                        });
                    }
                    }/>);
            }
        }

    }

    // 是否显示"车辆录入"项
    showCarInputItem() {
        if (Util.user.userinfo) {
            if (Util.user.token && Util.user.userid && Util.user.userinfo.authinput.toString() === '200') {
                return (<ModuleTextItem
                    clickedTextItem={this.clickedInput.bind(this)}
                    text='车辆录入'
                    icon={require('../../../img/MineIconInput.png')}/>);
            }
        }
    }


    clickedInput() {
        Actions.RecordedCarList({
            name: 'RecordedCarList',
        });
    }


}
